<template>
  <div>
    <pform ref="form" :model="form" lw="150">
      <el-form-item label="区域">
        <el-select style="width:233px;" v-model="form.field1" placeholder="请选择区域">
          <el-option label="东南中心" value="dn"></el-option>
          <el-option label="南方中心" value="nf"></el-option>
          <el-option label="北方中心" value="bf"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="可用分区">
        <el-radio-group v-model="form.field2">
          <el-radio label="高性能资源池"></el-radio>
          <el-radio label="通用性能资源池"></el-radio>
        </el-radio-group>
      </el-form-item>
      <fbr></fbr>
      <el-form-item label="创建方式">
        <el-radio-group v-model="form.field3">
          <el-radio label="新建虚拟机"></el-radio>
          <el-radio label="由模板创建虚拟机"></el-radio>
        </el-radio-group>
      </el-form-item>
      <fbr></fbr>
      <el-form-item label="虚拟机服务器类型">
        <div class="role-desbox">
          <el-button type="primary" class="mbt20">通用型</el-button>
          <div v-show="form.usable!='可用区3'">
            <div class="esclist esclist-t">
              <div class="e-item">规格名称</div>
              <div class="e-item">vCPUs</div>
              <div class="e-item">内存</div>
              <div class="e-item">CPU厂商</div>
            </div>
            <div class="esclist">
              <div class="e-item"><el-radio v-model="form.field4" label="1" style="margin-right: 10px;">{{ '' }}</el-radio>4U64G</div>
              <div class="e-item e-item-2">4vCPUs</div>
              <div class="e-item e-item-2">64GB</div>
              <div class="e-item e-item-2">Intel</div>
            </div>
            <div class="flex-c" style="margin-top: 10px;line-height: 20px;"><div style="margin-right: 50px;">当前规格</div><div>通用型 |8U64G | 8 核 |64GB | Intel</div></div>
            <div class="escplasin" style="line-height: 30px;">如需创建新规格，请联系管理员创建</div>
          </div>
        </div>
      </el-form-item>
      <fbr></fbr>
      <el-form-item label="启动方式">
        <el-radio-group v-model="form.field5">
          <el-radio label="BIOS"></el-radio>
          <el-radio label="UEFI"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="镜像">
        <el-radio-group v-model="form.field6" @change="mirrorChange" style="margin-bottom: 20px;">
          <el-radio-button label="公共镜像"></el-radio-button>
          <el-radio-button label="私有镜像"></el-radio-button>
        </el-radio-group>
        <div class="flex-c" v-show="form.field6=='公共镜像'">
          <el-select size="small" style="width:267px;margin-right: 80px;" v-model="form.field8" placeholder="请选择操作系统">
            <el-option v-for="item in option1" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
          <el-select size="small" style="width:267px;" v-model="form.field9" placeholder="请选择操作系统版本">
            <el-option v-for="item in option2" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </div>
        <div class="flex-c" v-show="form.field6=='私有镜像'">
          <el-select size="small" style="width:267px;margin-right: 80px;" v-model="form.field10" placeholder="请选择镜像类别">
            <el-option v-for="item in option3" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
          <el-select size="small" style="width:267px;" v-model="form.field11" placeholder="请选择镜像名称">
            <el-option v-for="item in option4" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
          <i style="font-size: 25px;margin:0 10px 0 30px;" class="el-icon-refresh-right" @click="resetMor"></i>
          <div class="btntext" @click="createMOR">新建私有镜像</div>
        </div>
      </el-form-item>

      <fbr></fbr>
      <el-form-item label="必须同一存储">
        <el-radio-group v-model="form.field12">
          <el-radio label="是"></el-radio>
          <el-radio label="否"></el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="系统盘">
        <div style="min-height: 120px;">
          <div class="flex-c">
            <el-select size="small" class="w233 mr60" v-model="form.field13" placeholder="请选择系统盘类型">
              <el-option v-for="item in option" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
            <el-input-number size="small" style="width:215px" v-model="form.field14" :min="1" :max="200"></el-input-number>GB
          </div>
          <div class="flex-c">
            <pbtn class="mr15" @click="hasTag=true"></pbtn>
            <div>增加一块数据盘</div>
            <div class="explain">您还可以增加59块云硬盘</div>
          </div>
          <div class="flex-c" v-show="hasTag">
            <pbtn class="mr15" @click="delTag" iname="minus"></pbtn>
            <el-select size="small" class="w233 mr60" v-model="form.field15" placeholder="请选择系统盘类型">
              <el-option v-for="item in option" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
            <div class="mr40"><el-input-number size="small" class="w215 mr3" v-model="form.field16" :min="1"></el-input-number>GB</div>
            <div style="margin-left: 40px;">
              数量: <el-input-number size="small" class="w215" v-model="form.field17" :min="1"></el-input-number>
            </div>
          </div>
        </div>
      </el-form-item>

      <fbr></fbr>

      <el-form-item label="申请数量">
        <div class="flex-c">
          <el-input-number size="small" class="w215" v-model="form.field18" :min="1" :max="200"></el-input-number>
          <div class="explain">一次最多支持申请200台</div>
        </div>
      </el-form-item>
    </pform>
  </div>
</template>

<script>
// import pform from '@/components/publicForm.vue'
  export default {
    // components:{pform},
    data() {
      return {
        hasTag: false,
        form: {
          field1:'',
          field2:'高性能资源池',
          field3:'新建虚拟机',
          field4:'1',
          field5:'BIOS',
          field6:'公共镜像',
          field7:'',
          field8:'',
          field9:'',
          field10:'',
          field11:'',
          field12:'是',
          field13:'',
          field14:'',
          field15:'',
          field16:'',
          field17:'',
          field18:'',
          field19:'',
        },
        option:[
          
        ],
        // option1操作系统 option2操作系统 option3操作系统 option4操作系统
        option1:[
          {label:'CentOS',value:'CentOS'},
          {label:'Ubuntu',value:'Ubuntu'},
          {label:'Windows',value:'Windows'},
        ],
        option2:[
          {label:'Ubuntu 1804 x86 server 64bit sdi2 for BareMetal With Uniagen',value:'CentOS'},
          {label:'Ubuntu 1804 x86 server 64bit sdi2 for BareMetal With Uniagen',value:'Ubuntu'},
          {label:'Ubuntu 1804 x86 server 64bit sdi2 for BareMetal With Uniagen',value:'Windows'},
        ],
        option3:[
          {label:'请选择镜像类别',value:'请选择镜像类别'},
          {label:'操作系统',value:'操作系统'},
          {label:'数据库与缓存',value:'数据库与缓存'},
          {label:'应用运行环境',value:'应用运行环境'},
          {label:'管理与监控',value:'管理与监控'},
          {label:'网络与安全',value:'网络与安全'},
          {label:'开发语言环境',value:'开发语言环境'},
          {label:'中间件等',value:'中间件等'},
        ],
        option4:[
          {label:'Check Point CloudGuard',value:'CentOS'},
          {label:'Check Point CloudGuard',value:'Ubuntu'},
          {label:'Check Point CloudGuard',value:'Windows'},
        ],
      }
    },
    methods: {
      init() {},
      getFormData() {
        return JSON.parse(JSON.stringify(this.form))
      },
      delTag() {
        this.hasTag = false
        this.form.tagKey = ''
        this.form.tagVal = ''
      },
      mirrorChange(val) {
        this.form.OS = ''
        this.form.OSType = ''
        this.form.morType = ''
        this.form.morName = ''
      },
      resetMor(){
        this.form.morType = ''
        this.form.morName = ''
      },
      // 新建镜像
      createMOR(){}
    }

  }
</script>

<style scoped lang="less">
  .role-desbox {
    width: 932px;
    min-height: 125px;

    .escplasin {
      font-size: 12px;
      color: #AAAAAA;
    }

    .esclist {
      height: 50px;
      display: flex;
      align-items: center;

      .e-item {
        color: #333333;
        width: 160px;
        text-align: center;
      }
      .e-item-2{
        display: flex;
        flex-flow: column nowrap;
        div{
          height: 25px;
          line-height: 25px;
        }
      }
    }

    .esclist-t {
      height: 35px;
      background-color: rgba(242, 242, 242, 1);
    }

  }
</style>
